<template>
    <div class="home">
        <p>当前求和为：{{ sum1 }}</p>
        <P>当前求和为：{{ sum2 }}</P>
        <p>汽车为：{{ car }}</p>
        <button @click="changeSum1">点我sum1+1</button>
        <button @click="changeSum2">点我sum2+1</button>
        <br>
        <button @click="changeBrand">修改车品牌</button>
        <button @click="changeColor">修改车颜色</button>
        <button @click="changePrice">修改车价格</button>
        <button @click="changeCar">修改整个车</button>
    </div>
</template>


<script setup lang="ts" name = "Page58">
import { ref,readonly, reactive ,shallowReadonly} from 'vue';
   
let sum1 = ref(0);
let sum2 = readonly(sum1)
let car=shallowReadonly(reactive({
    brand:'奔驰',
    options:{
        color:'红色',
        price:100
    }
}))

function changeSum1(){
    sum1.value +=1
}
function changeSum2(){
    sum1.value +=1
}

function changeBrand (){
    car.brand="宝马"
}
function changeColor (){
    car.options.color ='白色'
}

function changePrice (){
    car.options.price = 200
}

function changeCar (){
    
    /*
    car ={
        brand:'V10',
        options:{
            color:'灰色',
            price:200
        }
    }
    */
}


</script>

<style lang="scss" scoped>

</style>